<template>
  <div>
    <!-- 文章表单 -->
    <el-form
      :model="articalForm"
      :rules="rules"
      ref="articalForm"
      label-width="100px"
      class="articalForm">
      <!-- 基本信息 -->
      <el-row>
        <p class="ptitle">基本信息</p>
        <!-- left -->
        <el-col :span="8" >
          <!-- 文章标题 -->
          <el-form-item label="文章标题" prop="name" >
            <el-input
              v-model="articalForm.name"
              placeholder="请输入标题"
            ></el-input>
          </el-form-item>
          <!-- 文章来源 -->
          <el-form-item label="文章来源" prop="source">
            <el-input
              v-model="articalForm.source"
              placeholder="请输入文章来源"
            ></el-input>
          </el-form-item>
          <!-- 更新时间 -->
          <el-form-item label="更新时间" prop="releaseTime">
            <el-date-picker
              v-model="articalForm.releaseTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- right -->
        <el-col :span="8" :offset="2">
          <!-- 文章类别 -->
          <el-form-item label="文章类别" prop="desc" required>
            <el-select v-model="articalForm.desc">
              <el-option
                v-for="item in editArticalTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 作者 -->
          <el-form-item label="作者" prop="author">
            <el-input
              v-model="articalForm.author"
              placeholder="请输入文章作者"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 文章详情 -->
      <el-row>
        <p class="ptitle">文章详情</p>
        <el-col :span="8">
          <el-form-item label="文章封面" prop="img">
            <el-upload
              class="upload-demo"
              drag
              action="/oss/service/file/upload"
              multiple
              :limit=1
              :on-success='imgLoadSucess'
              >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，尺寸为750*360
              </div>
            </el-upload>
          </el-form-item>
          <!-- 跳转连接 -->
          <el-form-item label="跳转连接" prop="Url">
            <el-input
              v-model="articalForm.Url"
              placeholder="请输入跳转连接/artical/10格式"></el-input>
          </el-form-item>
          <!-- 一句话介绍 -->
          <el-form-item label="一句话介绍" prop="introduce">
            <el-input
              v-model="articalForm.introduce"
              placeholder="请输入文章来源"></el-input>
          </el-form-item>
          <!-- 文章正文 -->
          <el-form-item label="详细描述" prop="words">
            <quill-editor ref="text" v-model="articalForm.context" class="myQuillEditor" placeholder="请输入正文" :options="editorOption" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 上架操作 -->
      <el-row class="up">
        <p class="ptitle">上架操作</p>
        <!-- left -->
        <el-col :span="8">
          <!-- 排序-->
          <el-form-item label="排序" prop="sort">
            <el-input
              v-model="articalForm.sort"
              placeholder="请输入正整数，值越大越靠前"></el-input>
          </el-form-item>
          <!-- 状态-->
          <el-form-item label="状态" required>
            <el-select v-model="articalForm.inUse">
              <el-option
                v-for="item in editShelfStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col> 
        <!-- right -->
        <el-col :span="8" :offset="2">
          <!-- 是否置顶 -->
          <el-form-item label="是否置顶">
            <el-radio-group v-model="radio">
              <el-radio :label=false>否</el-radio>
              <el-radio :label=true>是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> 
      </el-row>
      <!-- 提交返回 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('articalForm')"
          >提交</el-button>
        <el-button @click="resetForm('articalForm')">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {insertHandler} from '../../http/content'
export default {
  data() {
    // 跳转连接正则
    var jumpUrl = (rule, value, callback) => {
      let articalUrlReg = /\/artical\/\d+$/g;
      if (value == "") {
        callback(new Error("请输入跳转url"));
      } else if (!articalUrlReg.test(value) && value != "") {
        callback(new Error("请输入正确的跳转url"));
      } else {
        callback();
      }
    };
    var Vsort = (rule, value, callback) => {
      let sortReg = /^\d+$/g;
      if (value == "") {
        callback(new Error("请输入正整数"));
      } else if (!sortReg.test(value) && value != "") {
        callback(new Error("请输入正确的正整数"));
      } else {
        callback();
      }
    };
    //排序正则
    return {
      radio:true,
      editorOption:{},
      //编辑文章分类
     editArticalTypes: [//编辑文章分类
        {
          value: "关于我们",
          label: "关于我们",
        },
        {
          value: "公告",
          label: "公告",
        },
        {
          value: "帮助中心",
          label: "帮助中心",
        }
      ],
      //编辑上架状态
      editShelfStatus: [
        {
          value: true,
          label: "上架",
        },
        {
          value: false,
          label: "下架",
        },
      ],
      articalForm: {
        name: "", //标题
        desc: "关于我们", //文章分类
        img: "", //上传图片地址
        releaseTime: "", //发布时间
        inUse: true, //上架状态
        sort: "10", //排序序号
        Url: "", //跳转地址
        introduce: "", //一句话介绍
        context: "", //文章正文
        inTop:null//是否置顶
      },
      rules: {
        name: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 100 个字符", trigger: "blur" },
        ],
        Url: [{ validator: jumpUrl, trigger: "blur" }],
        sort: [
          { min: 1, max: 5, message: "长度在 1 到 10 个字符", trigger: "blur" },
          { validator: Vsort, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //图片上传
    imgLoadSucess(response){
      this.articalForm.img = response.data.fileUrl;
    },
    //提交新增文章
    submitForm(formName) {
      this.articalForm.inTop = this.radio;
      console.log(this.articalForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertHandler('/article/insert',this.articalForm)
            .then((res) => {
              if(res.data.code != 20000){
                return this.$message.error(res.data.message);
              }
              this.$message.success('添加成功');
              this.$router.push('/content/artical')
            })
            .catch((err) => {
              this.$message.error(err);
            });
        } else {
          this.$message.error('提交内容不能为空');
          return false;
        }
      });
    },
    //重置新增文章
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("/content/artical");
    }
  },
};
</script>
<style lang="less">
  .el-form .el-select{
    width: 100%;
  }
  .ptitle {
    margin: 10px 0px 20px 0px;
    font-size: 20px;
  }
  .quill-editor {
    height: 200px;
  }
  .up {
    margin-top: 200px;
  }
  .articalForm {
    padding: 50px;
  }
</style>
